<template>
    <div>
        <div class="hao">
            <div class="hao1" v-for="(v,i) in list" :key="i" @click="fun(i)" :class="actiove == i ?'Active' : '' ">
                <h2>{{v.title}}</h2>
                <p>{{v.list1}}</p>
            </div>
        </div>
     <component :is ="com"></component>
     
    </div>
   
   
</template>
<script>
import Bikan from "@/components/haofang/bikan.vue"
import Youxuan from "@/components/haofang/youxuan.vue"
import Pinzhi from "@/components/haofang/pinzhi.vue"
import Haiwai from "@/components/haofang/haiwai.vue"
export default {
    data(){
        return{
            list:[
                {title:"必看二手",list1:"精选房源"},
                {title:"优选新房",list1:"热门好盘"},
                {title:"品质租房",list1:"整租合租"},
                {title:"海外好房",list1:"全球置业"},
            ],
            com:Bikan,
            actiove:0
        }
    },
    methods:{
        fun(i){
            if(i===0){this.com=Bikan}
            if(i===1){this.com=Youxuan}
            if(i===2){this.com=Pinzhi}
            if(i===3){this.com=Haiwai}
            this.actiove=i
        }
    }
}
</script>
<style scoped>
    .hao{
        margin-top:60px;
        margin-left:0.14rem;
        display:flex;
        overflow-x:auto;  
    }
    .hao1{
        margin:0.02rem;
        padding-bottom:0.06rem;
        flex-shrink: 0;
        width:30%;
        border-radius:0.06rem;
        margin-right:0.08rem;
        box-shadow: 0.01rem 0.01rem 0.08rem 0.02rem #eee  ;
    }
    .hao1 h2{
        text-align: center;
        font-weight:600;
        font-size:0.14rem;
        margin-top:0.08rem;
    }
    .hao1 p{
         text-align: center;
        font-weight:500;
        font-size:0.12rem;
        margin-top:0.04rem;
    }
     .hao1 :visited{
        border:0.01rem solid #858585;
    }
    /*点击后样式*/
    .Active{
        border:0.01rem solid #1d1d1d;
    }
</style>